<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<title></title>
		<style type="text/css">
			body {
				background-color: #E5E5E5;
			}
			#header {
				background-color: red;
				height: 50px;
			}
			.van-nav-bar__title {
				color: white;
				font-size: 15px;
				padding-top: 5px;
			}
			.van-nav-bar .van-icon {
				color: white;
				padding-top: 10px;
			}
			.van-nav-bar__text {
				color: white;
				padding-top: 10px;
			}
			.van-address-list {
				height: 100%;
				padding-bottom: 10px;
				box-sizing: border-box;
			}
			.van-button--small {
				margin-left: -30px;
			}
			p {
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<van-row>
				<van-nav-bar id="header" title="注册账号" left-text="返回" left-arrow  @click-left="back"></van-nav-bar>
			</van-row>
			<van-row id="register_form">
				<van-cell-group>
					<van-field 
					v-model="phone" 
					label="手机号" 
					type="tel"
					placeholder="请输入手机号"
					v-bind:error-message= error_message
					@blur="Checkphone"
					></van-field>
					<!-- 自动获取验证码 -->
					<van-field v-model="phone_code" center clearable label="短信验证码" placeholder="请输入短信验证码">
					<van-button slot="button" size="small" :disabled="disabled" type="primary" @click="Sendcode">{{sendcode}}</van-button>
					</van-field>
				</van-cell-group>
				<!--密码-->
				<van-cell-group>
					<van-field v-model="name"  placeholder="昵称（最多20字）"></van-field>
					<van-field v-model="password" type="password" placeholder="设置登录密码（至少6位）"></van-field>
					<van-field v-model="repassword" type="password" size="" placeholder="再次输入密码"></van-field>
					<van-field v-model="code"  placeholder="县/区Code(身份证前六位)"></van-field>
				</van-cell-group>
			</van-row>
			<p style="text-align: center;">注册会员及表示同意<a href="#">《用户注册协议》</a></p>
			<van-col span="10" offset="7">
				 	<van-button size="large"  round type="danger" @click="register">立即注册</van-button>
			</van-col>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					phone: "",
					name:"",
					error_message:"",
					phone_code:"",
					password: "",
					repassword: "",
					code:"",
					sendcode:"发送验证码",
					time:"10",
					disabled:false,
				},
				mounted() {
					plus.key.addEventListener("backbutton",function(){  
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					});  
				},
				methods:{
					back:function(){
						plus.webview.close("register");
					},
					Checkphone:function(res){
						var _this=this;
						//console.log(res);
						if(!(/^1[34578]\d{9}$/.test(_this.phone))){
							_this.error_message="请输入正确的手机号";
						}
						else{
							_this.error_message="";
						}
					},
					//注册用户
					register:function(){
						var _this=this;
						var toast=_this.$toast.loading({
							duration: 0,       // 持续展示 toast
							forbidClick: true, // 禁用背景点击
							loadingType: 'spinner',
							mask:true,
							message: '正在努力为您注册中,请稍后..'
						});
						setTimeout(function(){
							if(!(/^1[34578]\d{9}$/.test(_this.phone))){
								_this.error_message="请输入正确的手机号";
								_this.$toast("请输入正确的手机号");
							}
							else{
								_this.error_message="";
								if(_this.name==null){
									_this.$toast="昵称不能为空";
								}
								else{
									if(_this.password==null){
										_this.$toast="密码不能为空";
									}
									else{
										if(_this.code==null){
											_this.$toast="验证码不能为空";
										}
										else{
											ajax({
												url:"http://dsapi.ysd3g.com/API/UserRegister",
												dataType:"JSONP",
												data:{
													phone:_this.phone,
													code:_this.phone_code,
													password:_this.password,
													districtCode:_this.code,
													nickName:_this.name
												},
												success:function(res){
													// console.log(res)
													if(res.Error){
														_this.$toast(res.Msg);
													}
													else{
														_this.$toast("用户：' "+_this.name+ " '注册成功");
														setTimeout(function(){
															_this.$toast.clear();
															var vm=plus.webview.currentWebview();
															plus.webview.close(vm);
														},1000);
													}
												}
											});//完成注册请求
										}//验证验证码
									}//验证密码
								}//验证昵称
							}//验证手机号
						},1000)
						
					},
					Sendcode:function(){
						var _this=this;
						ajax({
							url:"http://dsapi.ysd3g.com/API/SendRegisterPhoneCode",
							dataType:"JSONP",
							data:{
								phone: _this.phone,
							},	
							success:function(res){
								// console.log(res)
								if(res.Error==true){
									_this.$toast(res.Msg);
								}
								else{
									_this.$toast("验证码为:"+res.Code);
									_this.phone_code=res.Code;
									var j=setInterval(()=>{
										_this.disabled=true;
										_this.time--;
										_this.sendcode="倒计时"+_this.time+"秒";
										if(_this.time==0){
											_this.sendcode="发送验证码";
											_this.disabled=false;
											_this.time=10;
											 clearInterval(j);
										};
									},1000)
									
								};
							}
						});
					}
				}
			});
		</script>
	</body>

</html>